<template>
  <DIV v-loading="loading">
    <el-col :span="24" class="content_title clearfix">
      <el-col :span="12">
        <HeadTitle></HeadTitle>
      </el-col>
      <el-col :span="12">
        <el-button :loading="$store.state.isLoading" @click="add_rank_btn()" type="primary" size="small" class="f_r">添加</el-button>
      </el-col>
    </el-col>
    <div class="user_rank">
      <div class="user_rank_part" :style="{ 'padding-top': i == 1 ? ' 90px' : '' }" v-for="(item, i) in rank_list" :key="item.id"
          v-show="item.id != 0">
        <div class="user_rank_item1">
          <div style="width:35%">
            <div class="item1_left_top">
              <p class="item_title">等级信息</p>
              <div class="item_btn">
                <el-button :loading="$store.state.isLoading" type="primary" size="small" @click="edit_rankinfo_btn(item.id)">编辑</el-button>
                <el-button :loading="$store.state.isLoading" type="info" size="small" @click="went_rank(item.id)">查看会员</el-button>
                <el-button :loading="$store.state.isLoading" v-if="item.id != 1" size="small" type="danger" @click="del_rank(item.id)">删除等级
                </el-button>
              </div>
            </div>
            <div class="item1_left_bottom">
              <div class="item1_left_bottom_item">
                <div class="item1_left_bottom_item_img">
                  <img src="../../../assets/img/rank2.png" alt />
                </div>
                <div class="item1_left_bottom_item_content">
                  <p>{{ item.title }}</p>
                  <span>等级名称</span>
                </div>
              </div>
              <div class="item1_left_bottom_item">
                <div class="item1_left_bottom_item_img">
                  <img src="../../../assets/img/rank1.png" alt />
                </div>
                <div class="item1_left_bottom_item_content">
                  <p>{{ item.discount }}</p>
                  <span>消费折扣</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="user_rank_item2">
          <div class="item2_top">
            <p class="item_title">任务奖励</p>
            <div class="item_btn">
              <el-button :loading="$store.state.isLoading" type="primary" size="small" @click="edit_task_btn(item.id)">编辑</el-button>
            </div>
          </div>
          <div class="item2_content">
            <p>
              直推奖励:
              <span>{{ item.task_level_1 }}‰ &nbsp;&nbsp;</span>
            </p>
            <p>
              间推奖励:
              <span>{{ item.task_level_2 }}‰ &nbsp;&nbsp;</span>
            </p>
            <p>
              奖励账号:
              <span>{{ item.vip_account }}</span>
            </p>
          </div>
        </div>

        <!-- <div class="user_rank_item2">
                    <div class="item2_top">
                        <p class="item_title">定制模块1</p>
                        <div class="item_btn">
                            <el-button :loading='$store.state.isLoading'
                                type="primary"
                                size="small"
                                @click="edit_dz1_btn(item.id)">编辑
                            </el-button>
                        </div>
                    </div>
                    <div class="item2_content">

                    </div>
        </div>-->
      </div>
    </div>
    <!--        添加会员等级-->
    <el-dialog title="添加会员等级" :visible.sync="add_rank_show" width="30%" :close-on-click-modal="false">
      <el-form ref="form" :model="add_form" :label-position="'right'" class="edit_dialog">
        <el-form-item label="等级名称:" prop="title" label-width="100px">
          <el-input placeholder v-model="add_form.title" clearable style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :loading="$store.state.isLoading" size="small" @click="add_rank_show = false">取 消</el-button>
          <el-button :loading="$store.state.isLoading" type="primary" size="small" @click="add_rank(add_form)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--        编辑等级信息-->
    <el-dialog title="编辑等级信息" :visible.sync="edit_rankinfo_show" width="30%" :close-on-click-modal="false">
      <el-form ref="form" :model="edit_data" :label-position="'right'" class="edit_dialog">
        <el-form-item label="等级名称:" prop="title" label-width="100px">
          <el-input placeholder v-model="edit_data.title" clearable style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="消费折扣:" prop="discount" label-width="100px">
          <el-input placeholder v-model="edit_data.discount" clearable style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :loading="$store.state.isLoading" @click="edit_rankinfo_show = false">取 消</el-button>
          <el-button :loading="$store.state.isLoading" size="small" type="primary" @click="edit_rankinfo(edit_data)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--        编辑任务奖励模块-->
    <el-dialog title="编辑任务奖励模块" :visible.sync="edit_task_show" width="30%" :close-on-click-modal="false">
      <el-form ref="form" :model="edit_data" :label-position="'right'" class="edit_dialog" style>
        <el-form-item label="直推奖励:" prop="task_level_1" label-width="100px">
          <el-input placeholder v-model="edit_data.task_level_1" clearable style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="间推奖励:" prop="task_level_2" label-width="100px">
          <el-input placeholder v-model="edit_data.task_level_2" clearable style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="奖励账号:" prop="dividend_account" label-width="100px">
          <el-select v-model="edit_data.vip_account" placeholder="请选择" style="width:200px ;">
            <el-option v-for="y in sel_option" :key="y.value" :label="y.label" :value="y.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button :loading="$store.state.isLoading" @click="edit_task_show = false" size="small">取 消</el-button>
          <el-button :loading="$store.state.isLoading" type="primary" size="small" @click="edit_task(edit_data)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--定制1-->
    <el-dialog title="编辑定制模块" :visible.sync="edit_dz1_show" width="30%" :close-on-click-modal="false">
      <el-form ref="form" :model="edit_data" :label-position="'right'" class="edit_dialog" style>
        <el-form-item>
          <el-button :loading="$store.state.isLoading" @click="edit_dz1_show = false" size="small">取 消</el-button>
          <el-button :loading="$store.state.isLoading" type="primary" size="small" @click="edit_dz1(edit_data)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </DIV>
</template>

<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
export default {
  name: "user_rank",
  components: {
    HeadTitle
  },
  data () {
    return {
      is_upgrade: 0,
      is_open: [],
      dividend_types: [
        { value: "1", label: "全部商城营业额分红" },
        { value: "2", label: "普通商城营业额分红" },
        { value: "3", label: "会员商城营业额分红" },
        { value: "4", label: "全部商城利润分红" },
        { value: "5", label: "普通商城利润分红" },
        { value: "6", label: "会员商城利润分红" }
      ],
      edit_id: "",
      edit_data: {},
      ratings: [],
      edit_rankinfo_show: false, //编辑等级信息
      edit_dz1_show: false, //定制1模块
      sel_option: this.$store.state.rewardOption || [],
      add_form: {
        title: "", //名称
        discount: "", //折扣
        zt_num: "", //直推会员人数
        td_num: "", //团队会员人数
        direct_rating: "0", //直推指定会员等级
        direct_rating_number: "", //直推指定会员等级人数
        shop_buy: "", //累计商城总消费额
        assign_buy: "", //累计会员商品消费额
        recharge: "", //总充值额
        td_shop_buy: "", //团队商品总消费额
        td_assign_buy: "", //团队会员商品总消费额
        level_1: "", //直推奖
        level_2: "", //间推奖
        level_3: "", //三级奖
        level_4: "", //四级奖
        level_5: "", //五级奖
        level_account: "", //分销模块奖励账户
        team: "", //团队奖励
        team_same: "", //平级奖励
        team_account: "", //团队奖励账户
        dividend: "", //股东分红
        dividend_cycle: "", //结算周期 0日1周2月
        dividend_account: "" //股东分红结算账户
      },
      accounts_option: [
        //结算周期
        {
          label: "时",
          val: "0"
        },
        {
          label: "日",
          val: "1"
        },
        {
          label: "周",
          val: "2"
        },
        {
          label: "月",
          val: "3"
        }
      ],
      add_rank_show: false,
      loading: false,
      rank_list: [],
      edit_task_show: false
    };
  },
  created () {
    this.getupgrade();
    this.get_rank_list();
    this.get_seloption(); //获取浏览器缓存
    this.get_sinle_rank("1");
    this.is_open = JSON.parse(localStorage.getItem("limit"));
  },
  methods: {
    getupgrade () {
      //会员费管理  如果为1 取消编辑升级调剂
      this.$api.getSettings.findConfig({ iden: "vip_mode " }).then(res => {
        if (res.data.code == 200) {
          this.is_upgrade = res.data.result;
        }
      });
    },
    went_rank (rank) {
      //根据等级查看会员

      let routeData = this.$router.resolve({
        path: "./user",
        query: { rating: rank }
      });
      window.open(routeData.href, "_blank");
    },
    edit_dz1 (obj) {
      //编辑定制1模块
      obj.id = this.edit_id;
      this.$api.getUser.edit_rank_save(obj).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("");
          this.get_rank_list();
        } else {
          this.$fnc.alertError("编辑失败");
          this.get_rank_list();
        }
      });
      this.get_rank_list();
      this.edit_dz1_show = false;
    },
    edit_dz1_btn (id) {
      //显示编辑定制1窗口
      this.edit_id = id;
      this.edit_dz1_show = true;
      this.get_sinle_rank(id);
    },
    edit_task (obj) {
      //编辑任务奖励模块
      obj.id = this.edit_id;
      this.$api.getUser.edit_rank_save(obj).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("");
          this.get_rank_list();
        } else {
          this.$fnc.alertError("编辑失败");
          this.get_rank_list();
        }
      });
      this.get_rank_list();
      this.edit_task_show = false;
    },
    edit_task_btn (id) {
      //显示编辑任务奖励模块窗口
      this.edit_id = id;
      this.edit_task_show = true;
      this.get_sinle_rank(id);
    },
    edit_rankinfo (obj) {
      //编辑等级信息
      obj.id = this.edit_id;
      this.$api.getUser.edit_rank_save(obj).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("");
          this.get_rank_list();
        } else {
          this.$fnc.alertError("编辑失败");
          this.get_rank_list();
        }
      });
      this.edit_rankinfo_show = false;
    },
    edit_rankinfo_btn (id) {
      //显示编辑等级信息窗口
      this.edit_id = id;
      this.edit_rankinfo_show = true;
      this.get_sinle_rank(id);
    },
    del_rank (id) {
      //删除会员
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          this.$api.getUser.del_rank({ id: id }).then(res => {
            if (res.data.code == 200) {
              this.$fnc.alertSuccess("");
              this.get_rank_list();
            } else {
              this.$fnc.alertError("删除失败");
              this.get_rank_list();
            }
          });
        }
      });
    },

    add_rank (obj) {
      this.$api.getUser.add_rank(obj).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("");
          this.get_rank_list();
        } else {
          this.$fnc.alertError("添加失败");
          this.get_rank_list();
        }
      });
      this.add_rank_show = false;
    },
    add_rank_btn (id) {
      //添加会员窗口显示按钮
      this.edit_id = id;
      this.add_rank_show = true;
    },
    get_seloption () {
      var params = {};
      this.$api.getPlugin.rewardOp(params).then(res => {
        if (res.data.code == 200) {
          // alert(res.data.result);
          this.$store.commit("setRewardOption", res.data.result);
          this.sel_option = this.$store.state.rewardOption;
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    get_sinle_rank (id) {
      //得到一个id详情;
      var temp = {};
      this.$api.getUser.get_singlerank({ id: id }).then(res => {
        if (res.data.code == 200) {
          this.edit_data = res.data.result;
          this.edit_data.shop_buy = parseFloat(this.edit_data.shop_buy).toFixed(
            2
          );
          this.edit_data.assign_buy = parseFloat(
            this.edit_data.assign_buy
          ).toFixed(2);
          this.edit_data.recharge = parseFloat(this.edit_data.recharge).toFixed(
            2
          );
          this.edit_data.td_shop_buy = parseFloat(
            this.edit_data.td_shop_buy
          ).toFixed(2);
          this.edit_data.td_assign_buy = parseFloat(
            this.edit_data.td_assign_buy
          ).toFixed(2);
          this.edit_data.highest = parseFloat(this.edit_data.highest).toFixed(
            2
          );
          this.edit_data.zt_shop_buy = parseFloat(
            this.edit_data.zt_shop_buy
          ).toFixed(2);
          this.edit_data.zt_assign_buy = parseFloat(
            this.edit_data.zt_assign_buy
          ).toFixed(2);
          if (res.data.result.direct_rating == "0") {
            this.$set(this.edit_data, "direct_rating", "");
          }
        } else {
          this.$fnc.alertError("获取详情失败");
        }
      });
    },
    get_rank_list () {
      //获得会员等级列表
      this.$api.getUser.get_rank({}).then(res => {
        if (res.data.code == 200) {
          this.rank_list = res.data.result;
          this.$store.commit("setRatting", res.data.result);
          this.rank_list.unshift({ id: "0", title: "请选择" });
        }
      });
    }
  },
  filters: {
    retain_two: function (data) {
      //保留两位小数
      return parseFloat(data).toFixed(2);
    }
  }
};
</script>

<style scoped>
.user_rank {
  width: 100%;

  /* margin: 60px auto 0 auto; */
}
.user_rank2 {
  width: 98%;
  margin: 20px auto 0 auto;
}
.user_rank_part {
  width: 100%;
  background-color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
}
.user_rank_item1 {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 20px;
}

.rank_item1_left {
  width: 35%;
  border-right: 1px solid #eeeeee;
}

/********************标题********************/
.item1_left_top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 5px solid #5aa5eb;
}
.item_title {
  font-size: 15px;
  color: #000000;
  font-weight: bold;
  text-indent: 10px;
}
/*******************************/
.item_btn {
  padding-right: 30px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.item1_left_bottom {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  height: auto;
}
.item1_left_bottom_item {
  width: 48%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.item1_left_bottom_item_img {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item1_left_bottom_item_img img {
  width: 65%;
}
.item1_left_bottom_item_content {
  display: flex;
  height: 50px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
}
.item1_left_bottom_item_content p {
  font-size: 18px;
  color: #000;
  font-weight: bold;
}
.item1_left_bottom_item_content span {
  font-size: 15px;
  color: #cccccc;
}
.rank_item1_right {
  width: 64%;
}
.item1_right_bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.item1_right_bottom span {
  font-size: 14px;
  color: #fff;
  padding: 5px 10px;
  margin: 10px 10px 5px 10px;
  border-radius: 5px;
}
.item1_right_bottom span:nth-child(odd) {
  background-color: #01b0af;
}
.item1_right_bottom span:nth-child(even) {
  background-color: #25a0ff;
}
/*-------------------------------------------------*/
.user_rank_item2 {
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  border-bottom: 1px solid #eeeeee;
  padding: 20px 0;
}
.item2_top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 5px solid #5aa5eb;
}
.item2_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-top: 15px;
}
.item2_content p {
  display: inline;
  font-size: 14px;

  color: #4c4c4c;
  margin-right: 80px;
}

.item2_content p:nth-of-type(1) {
  text-indent: 18px;
}
.item2_content p span {
  font-size: 14px;
  color: #fd4466;
  padding-left: 5px;
}
/***********************添加弹出窗*******************/
.add_form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.el-form-item {
  margin-right: 40px;
  margin-left: 20px;
}
.el-form--inline .el-form-item {
}
.edit_dialog {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
}
.edit_dialog {
  text-align: right;
}
.edit_dialog .el-form--label-left .el-form-item__label {
  text-align: right;
}
.edit_dialog .el-form-item__content {
  text-align: left;
}
</style>
